.module_city_8{
  background:url(../image/city-8-bg.jpg) no-repeat center center;
  background-size: cover; 
  height: 800px;
  position: relative;
  .container{
    height: 100%;

    .time-line{
      margin-top: 120px;
      .pod{
        img{
          margin-top:50px;
        }
        &:focus{
          outline: none;
        }
        h3{
          font-size:40px;
          margin-bottom: 0px;
          font-family: "HelveticaNeueLTPro-ThEx33";
        }
        p{
          font-size:16px;
          margin-top: 10px;
          font-family: "HelveticaNeueLTPro-ThEx33";
        }
      }

    }

    .fa-chevron-left{
      position: absolute;
      top: 50%;
      left: 0;
      font-size: 60px;
      margin-left: -40px;
      cursor: pointer;
      opacity: 0.4;
      transition:color .3s;
      color: #00d7ff;
      margin-top: 22px;
      &:hover{
        opacity: 0.8;
      }
    }
    .fa-chevron-right{
      @extend .fa-chevron-left;
      right: 0;
      left: auto;
      margin-right:-30px;
    }

  }

  %full-width{
    width: 100%;

  }
  .time-line-bg{
    @extend %full-width;
    margin-top: -360px;
    height: 54px;
    background: url(../image/city-8-time-line-bg.png) repeat-x;
  }
  .year-line-wrapper{
    background:#fff;
  }
  .year-line{
    @extend %full-width;
    background: #fff;
    height: 60px;
    text-align: center;
    .year{
      line-height: 60px;
      margin-right: 200px;
      cursor: pointer;
      font-size: 24px;
      color: #323237;
      white-space: nowrap;
      &.active{
        color:#00d7ff;
      }
    }
  }


  @include max767 {
    &{
      height: auto;
      padding: 20px 0;
      background:#0069d2;
      color: #fff;
      .container{
        .time-line{
          margin-top: 0;

          .col-md-4{
            text-align: center;
            img{
              margin-top: 0;
              width: 100%;
              height: auto;
            }
          }
          .col-md-8{
            text-align: center;
            h3{
              font-size: 24px;
            }
            p{
              font-size: 16px;
            }
          }
          .slick-dots{
            li.slick-active{
              button:before{
                color:#00d7ff;
              }
            } 
          } 
        }
      }
    }
  }

}

